<template>
  <div :class="{zxq: true, tableSetHei: $route.name!=='embedTrade' && !tradeMenu, tableIndex: $route.name === 'index'}"
    :style="$route.name === 'embedTrade' || tradeMenu ? 'background: none' : ''">
    <el-table
      :class="{'center noCellPadding': $route.name === 'embedTrade' || tradeMenu}"
      @row-click="handleRowClick"
      :empty-text="hasDataForTable ? $t('myWallet.loadData') : $t('myWallet.noData')"
      :data="handleTableData()"
      ref="vueTable"
      v-loading="loading"
      highlight-current-row
      @current-change="handleCurrentChange"
      @sort-change="handleSortChange"
      style="width: 100%"
      :height="eltableHeight"
      :row-class-name="tableRowClassName">
      <!-- @cell-mouse-enter="handleRowHoverEnter"
      @cell-mouse-leave="handleRowHoverLeave" -->
      <!-- 收藏 -->
      <el-table-column
        :width="subCoinPair==='resource' ? $route.name === 'embedTrade' || tradeMenu ? '30px' : '55px' :
        $route.name === 'embedTrade' || tradeMenu ? '39px' : '75px'">
        <template slot-scope="scope" style="font-size: 12px;">
          <div class="newCoin"
            :style="$route.name!=='embedTrade' && !tradeMenu ? 'padding-right: 12px;' : 'text-align:left'">
            <i v-if="subCoinPair!=='resource'">
              <i class="iconfont logoicon fontcd fontTrans"
              v-if="$route.name!=='embedTrade' && !tradeMenu"
              :class="scope.row.isFavorite ? 'icon-zixuan1' : 'icon-zixuan'"
              @click.stop="handleRegFavorite(scope.row)"
              style="margin-right: 13px;"></i>
              <i class="iconfont logoicon fontcd fontTrans"
              v-if="$route.name === 'embedTrade' || tradeMenu"
              :class="scope.row.isFavorite ? 'icon-zixuan1' : 'icon-zixuan'"
              @click.stop="handleRegFavorite(scope.row)"></i>
            </i>
            <div class="newCoinImg"
            :class="{'tradeImg' : $route.name === 'embedTrade' || tradeMenu,
            'newCoinImgForTron' : $appName === 'tronNewdex'}">
              <!-- https://ndi.340wan.com/eos/newdexissuer-ndx.png -->
              <img alt=""
              v-if="$appName === 'eosNewdex'
              && scope.row.valuationCoinContract === 'issue.newdex'
              && scope.row.contract !== 'issue.newdex'"
              :src="`https://ndi.340wan.com/${scope.row.baseChain}/${scope.row.contract}-${(scope.row.symbolTrad || '').toLowerCase()}.png`">
              <img alt=""
              v-else-if="$appName === 'eosNewdex'
              && scope.row.valuationCoinContract === 'issue.newdex'"
              :src="`https://ndi.340wan.com/${scope.row.baseChain}/${scope.row.valuationCoinContract}-${(parseSymbol(scope.row.symbol, scope.row.contract)[1].toUpperCase() || '').toLowerCase()}.png`">
              <img alt=""
              v-else-if="$appName === 'eosNewdex'
              && (scope.row.valuationCoinContract === 'bitpietokens' || scope.row.valuationCoinContract === 'enu.token')
              && parseSymbol(scope.row.symbol, scope.row.valuationCoinContract)[1].toUpperCase() !== 'EOS'"
              :src="`https://ndi.340wan.com/${scope.row.baseChain}/${scope.row.valuationCoinContract}-${(parseSymbol(scope.row.symbol, scope.row.valuationCoinContract)[1].toUpperCase() || '').toLowerCase()}.png`">
              <!-- 合约为eosio.token -->
              <img alt=""
              v-else-if="$appName === 'eosNewdex' &&
              scope.row.valuationCoinContract &&
              scope.row.valuationCoinContract !== 'eosio.token' &&
              scope.row.valuationCoinContract !== 'tethertether' &&
              scope.row.valuationCoinContract !== 'issue.newdex'"
              :src="`https://ndi.340wan.com/${scope.row.baseChain}/${scope.row.valuationCoinContract}-${(parseSymbol(scope.row.symbol, scope.row.valuationCoinContract)[2].toUpperCase() || '').toLowerCase()}.png`">
              <img alt=""
              v-else-if="$appName === 'tronNewdex'"
              :src="`https://ndi.340wan.com/tron/${(scope.row.symbolTrad).toLowerCase()}.png`">
              <img alt=""
              v-else
              :src="`https://ndi.340wan.com/${scope.row.baseChain}/${scope.row.contract}-${(scope.row.symbolTrad || '').toLowerCase()}.png`">
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 交易对 -->
      <el-table-column
        :width="$route.name === 'embedTrade' || tradeMenu ? '105' : '138px'"
        :label="$route.name!=='embedTrade' || !tradeMenu ? $t('public.symbol') : $t('quotation.market')">
        <template slot-scope="scope" style="font-size: 12px;">
          <div :style="$route.name === 'embedTrade' || tradeMenu ? 'line-height: 14px;' : 'line-height: 18px;'">
            <span style="vertical-align: text-bottom; white-space: nowrap;" class="symbolCoinCode flex">
              <span
                class="color-333"
                :class="(scope.row.checked && ($route.name === 'embedTrade' || tradeMenu)) ? 'colorThis' : 'jyd-left'">
                {{ scope.row.symbolTrad }}
                <template v-if="scope.row.symbolTrad.length > 4 && scope.row.symbolArea === 'MEETONE'">/ ME...</template>
                <template v-else-if="!scope.row.isRresource">/ {{ scope.row.symbolArea }}</template>
                <template v-if="$route.name!=='embedTrade' && !tradeMenu">
                  <!-- 置顶 -->
                  <div v-if="scope.row.top_flag === 1 && !selfSelection">
                    <i class="ndxTip iconfont" :class="`icon-top-${$store.state.app.language}`" style="color: rgb(236, 163, 47);"></i>
                  </div>
                  <!-- 交易大赛 -->
                  <div v-else-if="scope.row.tag === 1">
                    <i class="ndxTip iconfont" :class="`icon-trade-${$store.state.app.language}`"></i>
                  </div>
                  <!-- 即将上架 -->
                  <template v-else-if="scope.row.status === 5">
                    <i class="newCoinIcon iconfont icon-jijiangkaifang" :class="`icon-rbegin-${$store.state.app.language}`"></i>
                  </template>
                  <!-- 新币种 -->
                  <i class="newCoinIcon iconfont icon-new" v-else-if="scope.row.status === 10"></i>
                </template>
              </span>
              <!-- 跨链标签 -->
              <el-popover
                placement="bottom"
                trigger="hover"
                center
                :content="$t('jy.crossChain')"
                popper-class="transDown1"
                v-if="scope.row.baseChain !== scope.row.valuationChain">
                <img slot="reference"
                  src="../../static/img/chain/celian.png"
                  class="iconfont celianImg"
                  :style="{'width': $route.name === 'embedTrade' || tradeMenu ? '16px' : ''}" />
                  <!-- 'margin-left': $route.name === 'trade' || $route.name === 'embedTrade' && scope.row.symbolTrad === 'MEETONE' ? '-2px' : ''} -->
              </el-popover>
              <!-- <span
                style="color: #999;"
                :class="(scope.row.checked && $route.name === 'trade') ? 'colorThisOne' : 'jyd-left'"
                >{{ scope.row.contract }}</span> -->
              <!-- 新增币种 -->
              <!-- 交易暂停 -->
              <el-popover
                placement="bottom"
                trigger="hover"
                center
                :content="$t('jy.transStop')"
                popper-class="transDown"
                v-if="scope.row.status">
                <i slot="reference"
                  class="iconfont icon-jiaoyizanting"
                  v-if="$route.name!=='embedTrade' && !tradeMenu && scope.row.status === 1"></i>
              </el-popover>
              <!-- 下架中 -->
              <el-popover
                placement="bottom"
                trigger="hover"
                center
                :content="$t('jy.ToDislisted')"
                popper-class="transDown"
                v-if="scope.row.status">
                <i slot="reference" class="iconfont icon-jiaoyitingzhi icon-color"
                v-if="$route.name!=='embedTrade' && !tradeMenu && scope.row.status === 2"></i>
              </el-popover>
              <!-- 已下架 -->
              <el-popover
                placement="bottom"
                trigger="hover"
                center
                :content="$t('jy.transDown')"
                popper-class="transDown"
                v-if="scope.row.status">
                <i slot="reference" class="iconfont icon-jiaoyitingzhi icon-color"
                v-if="$route.name!=='embedTrade' && !tradeMenu && scope.row.status === 3"></i>
              </el-popover>
            </span>
          </div>
        </template>
      </el-table-column>
      <!-- 最新价 -->
      <el-table-column
        :width="$route.name==='embedTrade' || tradeMenu ? '70px' : '219px'"
        :label="$t('quotation.newPrice')">
        <template slot-scope="scope">
          <span :class="scope.row.change > 0 ? 'green' : scope.row.change < 0 ? 'red' : ''">
            <template v-if="scope.row.isRresource">
              {{ Number(toNonExponential(scope.row.price)).toFixed(scope.row.precision.price) }}
            </template>
            <template v-else>
              {{ handleToFixed(toNonExponential(scope.row.price), scope.row.precision.price) }}
            </template>
          </span>
          <span v-if="!tradeMenu
          && $route.name!=='embedTrade' && !scope.row.isRresource" style="color: #999;">{{scope.row.symbolArea}}</span>
          <span class="jyd-right" v-if="$store.state.app.pricesCurrentcy && $store.state.app.pricesCurrentcy.legalCurrencyForMat
            && $route.name!=='embedTrade' && !tradeMenu && !scope.row.isRresource">
            <!-- <span v-if="scope.row.symbol === 'rex-rex-eos' || scope.row.symbol === 'ram-ram-eos'">
              {{scope.row.contract.toUpperCase()}}
            </span> -->
            /<span v-if="$store.state.app.language === 'zh-CN'">
              <span v-if="$store.state.app.pricesCurrentcy[scope.row.symbolArea] * scope.row.price < 0.1 && scope.row.precision.price">
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{ handlePriceNumber(scope.row.symbolArea, scope.row.price, scope.row.precision.price) }}
              </span>
              <span v-else>
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[scope.row.symbolArea] * scope.row.price)).toFixed(2)}}
              </span>
            </span>
            <span v-else>
              <span v-if="$store.state.app.pricesCurrentcy[scope.row.symbolArea] * scope.row.price < 0.1 && scope.row.precision.price">
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{ handlePriceNumber(scope.row.symbolArea, scope.row.price, scope.row.precision.price) }}
              </span>
              <span v-else>
                {{ $store.state.app.pricesCurrentcy.legalCurrencyForMat }}
                {{Number(toNonExponential($store.state.app.pricesCurrentcy[scope.row.symbolArea] * scope.row.price)).toFixed(2)}}
              </span>
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 24H涨跌幅 -->
      <el-table-column style="padding-right: 0"
        prop="change"
        sortable="custom"
        :sort-orders="sortOrders"
        :width="$route.name === 'embedTrade' || tradeMenu ? '70px' : $route.name==='market' ? '132px' : '132px' "
        :label="$route.name!=='embedTrade' && !tradeMenu ? $t('quotation.quoteChange24H') : $t('quotation.quote')">
        <template slot-scope="scope">
          <span v-if="scope.row.change > 100 || scope.row.change < -100"
          :class="scope.row.change > 0 ? 'green' : scope.row.change < 0 ? 'red' : ''">
            {{ scope.row.change > 0 ? '+' : '' }}{{handleToFixed(accMul(scope.row.change, 100), 0)}}%
          </span>
          <span v-else :class="scope.row.change > 0 ? 'green' : scope.row.change < 0 ? 'red' : ''">
            <template v-if="scope.row.symbol === 'rex-rex-eos'">
              <template v-if="$route.name === 'embedTrade' || tradeMenu">
                {{ scope.row.change > 0 ? '+' : ''}}{{handleToFixed(accMul(scope.row.change, 100), 4)}}%
              </template>
              <template v-else>
                {{ scope.row.change > 0 ? '+' : ''}}{{handleToFixed(accMul(scope.row.change, 100), 6)}}%
              </template>
            </template>
            <template v-else>
              {{ scope.row.change > 0 ? '+' : ''}}{{handleToFixed(accMul(scope.row.change, 100), 2)}}%
            </template>
          </span>
        </template>
      </el-table-column>
      <!-- 24H最高价 -->
      <el-table-column
        :width="$route.name==='market' ? '140px' : '140px'"
        v-if="$route.name!=='embedTrade' && !tradeMenu"
        :label="$t('quotation.maxPrice')">
        <template slot-scope="scope">
          <span>
            <template v-if="!scope.row.isRresource">
              {{ handleToFixed(toNonExponential(scope.row.high), scope.row.precision.price) }}
            </template>
            <template v-else>
              {{ Number(toNonExponential(scope.row.high)).toFixed(scope.row.precision.price) }}
            </template>
            <span v-if="!scope.row.isRresource"
              style="color: #999;">
              {{scope.row.symbolArea}}
            </span>
          </span>
          <!-- <span class="jyd-right" v-if="scope.row.symbol === 'rex-rex-eos' || scope.row.symbol === 'ram-ram-eos'">
            / {{scope.row.contract.toUpperCase()}}
          </span> -->
        </template>
      </el-table-column>
      <!-- 24H最低价 -->
      <el-table-column
        :width="$route.name==='market' ? '140px' : '140px'"
        v-if="$route.name!=='embedTrade' && !tradeMenu"
        :label="$t('quotation.minPrice')">
        <template slot-scope="scope">
          <span>
            <template v-if="!scope.row.isRresource">
              {{ handleToFixed(toNonExponential(scope.row.low), scope.row.precision.price) }}
            </template>
            <template v-else>
              {{ Number(toNonExponential(scope.row.low)).toFixed(scope.row.precision.price) }}
            </template>
            <span v-if="!scope.row.isRresource"
              style="color: #999;">
              {{scope.row.symbolArea}}
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 24H成交量 -->
      <el-table-column
        prop="amount"
        sortable="custom"
        :sort-orders="sortOrders"
        v-if="$route.name!=='embedTrade' && !tradeMenu"
        :label="$t('quotation.dealCount24H')">
        <template slot-scope="scope">
          <span v-if="!isNaN(scope.row.amount)">
            {{ handleToFixed(scope.row.amount, scope.row.precision.coin) }}
            <span style="color: #999;">{{scope.row.symbolTrad}}</span>
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- 24H成交额 -->
      <el-table-column
        prop="volume"
        sortable="custom"
        :sort-orders="sortOrders"
        :width="$route.name==='market' ? '175px' : '175px'"
        v-if="$route.name!=='embedTrade' && !tradeMenu"
        :label="$t('footer.total24H')">
        <template slot-scope="scope">
          <span v-if="!isNaN(scope.row.volume)">
            <span v-if="scope.row.symbolArea === 'EUSD' || scope.row.symbolArea === 'CUSD'">
              {{ handleToFixed(scope.row.volume, 2) }}</span>
            <span v-else-if="scope.row.symbolArea === 'TRX' && $appName === 'tronNewdex'">
            {{ handleToFixed(scope.row.volume, 6) }}</span>
            <span v-else>{{ handleToFixed(scope.row.volume, scope.row.precision.valuationCoin)}}</span>
            <span style="color: #999;">{{scope.row.symbolArea}}</span>
          </span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

// import { EosModel } from '@/utils/eos';
import bus from '@/utils/bus';
import Io from '@/utils/socket/index';
import { toFixed, accMul, toNonExponential, authorized, parseSymbol, parseCase } from '@/utils/validate';

export default {
  data() {
    return {
      pageSize: 10000, // 页面数据条数 - 分页概念取消，暂定监听100条数据
      totalCount: 1, // 全部条数
      activeIndex: '1', // 默认选中自选区
      searchKey: '', // 搜索内容
      searchData: [], // 默认搜索内容
      tableData: [], // table数据列表（可能是收藏列表）
      tableDataAll: [], // table 完整数据列表
      currentRow: {}, // 选中行数据
      hasDataForTable: true,
      eltableHeight: 408,
      loading: false, // loading
      flag: true,
      subCoinPair: 'eos', // 当前选中的交易区
      selfSelection: false,
      storeSymbol: '', // 当前选中
      isoverTransition: true,
      trad: null,
      sortOrders: ['descending', 'ascending', null],
      tradRouterParams: '',
      historyList: [], // 历史数据
      isFirstLoad: true,
      tradeMenu: '', // rex和ram右边添加行情列表
    };
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.handleGetAccountFavorite();
      },
      deep: true,
    },
    '$store.state.app.trade': function change(val) {
      this.trad = val;
      this.handleCheckedSymbol();
      this.handleCurrentChange();
    },
    tableData: function change() {
      this.handleCheckedSymbol();
      if (!this.tableData.length) {
        this.hasDataForTable = false;
      }
    },
    searchData: function change() {
      if (!this.searchData.length) {
        this.hasDataForTable = false;
      }
    },
  },
  created() {
  },
  mounted() {
    const meta = this.$route.meta;
    this.tradeMenu = meta.tradeMenu;
    this.trad = this.$store.state.app.trade;
    this.listenActions();
    // 获取搜索历史记录
    const historyData = localStorage.getItem('historyData');
    const menuActiveIndex = localStorage.getItem('menu-activeIndex') || 0;
    this.historyList = historyData ? JSON.parse(historyData) : [];
    const routeParams = this.$route.params;
    if (routeParams
    && routeParams.trade
    && menuActiveIndex !== '-1,-1') {
      if (routeParams.trade === 'eosio.token-bos-eos') { // 如果是bos跨链交易对
        this.subCoinPair = 'bos';
      } else if (routeParams.trade === 'eosio.token-meetone-eos') { // 如果是meetone跨链交易对
        this.subCoinPair = 'meetone';
      } else if (routeParams.trade === 'enu.token-enu-eos') { // 如果是enu跨链交易对
        this.subCoinPair = 'enu';
      } else if (routeParams.trade === 'eosio-fo-eos') { // 如果是fibos跨链交易对
        this.subCoinPair = 'fibos';
      } else if (routeParams.trade === 'eosio.token-tlos-eos') { // 如果是telos跨链交易对
        this.subCoinPair = 'telos';
      } else if (routeParams.trade === 'eosio.token-wax-eos') { // 如果是wax跨链交易对
        this.subCoinPair = 'wax';
      } else if (routeParams.trade === 'eosio.token-lnx-eos') { // 如果是lynx跨链交易对
        this.subCoinPair = 'lynx';
      } else {
        const routeTrade = parseSymbol(routeParams.trade);
        if (routeTrade && routeTrade[2] !== this.subCoinPair) {
          this.subCoinPair = routeTrade[2].toLowerCase();
          if (this.subCoinPair === 'fo') {
            this.subCoinPair = 'fibos';
          }
          if (this.subCoinPair === 'tlos') {
            this.subCoinPair = 'telos';
          }
          if (this.subCoinPair === 'lnx') {
            this.subCoinPair = 'lynx';
          }
          if (this.$store.state.app.stableCode.find(v => v === this.subCoinPair.toUpperCase())) {
            this.subCoinPair = 'usds';
          }
        }
      }
    }
    if (menuActiveIndex === '0,3') {
      this.handleWsResource();
    }
    this.handleWsSymbolPrices();
  },
  beforeDestroy() {
    Io.cfwsUnsubscribe('markets.*');
    this.handleResourceWsClose();
    bus.$off('handleActiveChange');
    bus.$off('handleSearchChange');
    bus.$off('handleGetMenuList');
  },
  methods: {
    // 监听兄弟组件传递的事件
    listenActions() {
      bus.$off('handleActiveChange');
      bus.$off('handleSearchChange');
      /* 监听兄弟组件传递事件 start */
      bus.$on('handleActiveChange', (params) => {
        this.selfSelection = false;
        this.eltableHeight = 408;
        if (this.$appName === 'tronNewdex') {
          this.eltableHeight = 428;
        }
        this.subCoinPair = params.wsData;
        if (this.tableDataAll.length < 2 && params.name !== 'resourceArea') {
          this.tableDataAll = [];
          console.log('nodata', this.tableDataAll);// eslint-disable-line
          this.handleWsSymbolPrices();
        }
        if (params.name !== 'resourceArea') { // 资源中心
          this.handleResourceWsClose();
        }
        if (params.name === 'selfSelection') {
          // 自选区获取收藏列表数据
          this.selfSelection = true;
          this.handleGetAccountFavorite();
          this.eltableHeight = 428;
          return;
        }
        if (this.subCoinPair === 'crossLink') {
          this.eltableHeight = 428;
        }
        if (params.name === 'resourceArea') { // 资源中心
          this.handleResourceWsClose();
          this.handleWsResource();
          return;
        }
        // 查找对应的交易区列表数据
        // this.handleWsSymbolPrices();
        this.handleWsUsdtArea();
      });
      bus.$on('handleSearchChange', (params) => { // 监听菜单 searchValue 改变
        this.searchKey = params.searchKey;
        this.handleSearchData();
      });
      bus.$off('handleGetMenuList');
      bus.$on('handleGetMenuList', (params) => {
        const acindex = localStorage.getItem('menu-activeIndex');
        if (acindex) {
          const getactive = acindex.split(',');
          const ck = Number(getactive[0]);
          const ac = Number(getactive[1]);
          const menu = params.find(v => v.checked === ck && v.active === ac);
          if (menu) {
            this.subCoinPair = menu.wsData;
          }
        }
      });
      bus.$emit('handleCheckNavMenu', 'on');
    },
    // // 鼠标移入列表
    // handleRowHoverEnter(row, column, cell, event) { // eslint-disable-line
    // },
    // // 鼠标移出列表
    // handleRowHoverLeave(row, column, cell, event) { // eslint-disable-line
    // },
    // 设置索引
    tableRowClassName({ row, rowIndex }) {
      const rows = row;
      rows.index = rowIndex;
    },
    // 获取推送交易对信息
    handleWsSymbolPrices() {
      this.loading = true;
      this.hasDataForTable = true;
      const params = {
        // symbol: this.subCoinPair,
        symbol: '*',
        offset: 0,
        count: this.pageSize
      }
      Io.cfwsPricesSymbol(params, (res) => {
        if (res.length === 0) return;
        this.loading = false;
        // 设置默认的交易币种
        let resFirst = res.find(v => v.symbol === 'newdexissuer-ndx-eos');
        if (!resFirst) { // 如果找不到就选第一个
          resFirst = res[0];
        }
        const tradeStore = this.$store.state.app.trade;
        if ((!tradeStore || !tradeStore.id) && resFirst) {
          const query = this.$route.params;
          if (query && query.trade) {
            resFirst = res.find(v => v.symbol.toLowerCase() === query.trade.toLowerCase());
          }
          const symbolFomat = parseSymbol(resFirst.symbol, resFirst.contract);
          const tradAppDefault = {
            id: resFirst.id,
            symbol1: symbolFomat[1].toUpperCase(),
            symbol2: symbolFomat[2].toUpperCase(), // EOS
            symbol1_code: symbolFomat[0], // 交易币种合约
            symbol2_code: 'eosio.token', // EOS合约
            symbol: resFirst.symbol,
            coinDecimal: resFirst.precision.coin, // 币种精度
            priceDecimal: resFirst.precision.price, // 价格精度
          }
          this.$store.dispatch('setTrade', tradAppDefault);
        }
        this.trad = this.$store.state.app.trade;
        if (res.length > 1 && this.tableDataAll.length === 0) {
          // const blackEosIndex = res.findIndex(v => v.symbol === 'black_eos');
          // const rowfamt = res;
          // 手动排序
          // if (blackEosIndex !== -1) {
          //   rowfamt[1] = rowfamt.splice(blackEosIndex, 1, rowfamt[1])[0];
          // }
          // 查看vuex是否有交易对 添加首个为默认
          // const apptrad = this.$store.state.app.trade;
          // if (!apptrad) {
          //   const sym = rowfamt[0].symbol.split('_').toUpperCase();
          //   const resetTrad = {
          //     id: '',
          //     symbol1: sym[0],
          //     symbol2: sym[1],
          //     code: 'everipediaiq'
          //   }
          // }
          const items = [];
          res.forEach((vv) => {
            items.push(this.handleSymbolNewFormat(vv));
          })
          this.tableDataAll = items;
          // 获取自选收藏数据
          this.handleGetAccountFavorite();
          const codeList = {
            list: this.tableDataAll,
            timer: new Date().getTime(),
          }
          this.$store.dispatch('setCodeList', codeList);
          return;
        }
        const resNew = res[0];
        if (this.searchKey !== '') {
          const newSearchData = this.searchData.find(item => item.symbol.toLowerCase() === resNew.symbol.toLowerCase());
          if (newSearchData) {
            newSearchData.change = resNew.change;
            newSearchData.price = resNew.price;
            newSearchData.high = resNew.high;
            newSearchData.low = resNew.low;
            newSearchData.amount = resNew.amount;
          }
        }
        const newTableData = this.tableDataAll.find(item => item.symbol.toLowerCase() === resNew.symbol.toLowerCase());
        if (newTableData) {
          // 已有币种更新
          newTableData.change = resNew.change;
          newTableData.price = resNew.price;
          newTableData.high = resNew.high;
          newTableData.low = resNew.low;
          newTableData.amount = resNew.amount;
          newTableData.status = resNew.status;
        } else {
          // 新上线币种
          this.tableDataAll.push(this.handleSymbolNewFormat(resNew));
          if (this.subCoinPair === 'resource') return;
          this.handleCheckCodeByArea(); // 检出对应交易区币种
        }
        const codeList = {
          list: this.tableDataAll,
          timer: new Date().getTime(),
        }
        this.$store.dispatch('setCodeList', codeList);
        // if (!this.selfSelection && this.searchKey === '') {
        // }
      });
    },
    handleSymbolNewFormat(vv) {
      const v = vv;
      v.checked = false;
      v.isFavorite = false;
      v.cross = null;
      // v.contract === 'issue.newdex'
      if (v.symbol.indexOf('_') >= 0) {
        v.cross = v.symbol; // issue.newdex 跨链
        // v.symbol = `issue.newdex-${v.symbol.replace('_', '-')}`;
      }
      const symbolParse = parseSymbol(v.symbol, v.contract);
      v.symbolParse = symbolParse;
      const chainFomat = v.chain.split('-');
      v.chainSerach = chainFomat[0].toUpperCase();
      if (this.$appName === 'eosNewdex') {
        const usdsItem = this.$store.state.app.stableCode.find(u => v.symbol.indexOf(`-${u.toLowerCase()}-`) === -1
        && v.symbol.indexOf(`-${u.toLowerCase()}`) >= 0)
        if (usdsItem) {
          v.chainSerach = usdsItem;
        }
        if (v.symbol.indexOf('-usdt-') === -1 && v.symbol.indexOf('-usdt') >= 0 && v.contract !== 'issue.newdex') {
          v.chainSerach = 'USDT';
        }
        if (v.cross) {
          // v.chainSerach = 'crossLink';
          v.chainSerach = 'USDT';
        }
      }
      if (this.$appName === 'tronNewdex') {
        v.chainSerach = symbolParse[2];
      }
      v.baseChain = chainFomat[0]; // 基础币
      v.valuationChain = chainFomat[1]; // 计价币
      v.contract = symbolParse[0];
      v.symbolTrad = symbolParse[1].toUpperCase();
      v.symbolArea = symbolParse[2].toUpperCase();
      v.imageUrl = 'https://ndi.340wan.com/upload/20180919/ed752ac2f6174370bf879620ec821eee.png';
      const symbol = `${v.symbolTrad}_${v.symbolArea}`;
      if (symbol === `${this.trad.symbol1}_${this.trad.symbol2}`) {
        v.checked = true;
      }
      v.symbolFormat = `${v.symbolTrad}/${v.symbolArea}`;
      v.crossChain = v.baseChain !== v.valuationChain; // 是否垮链币种
      return v;
    },
    // usdt 交易区过滤
    handleWsUsdtArea() {
      this.loading = true;
      // 获取自选收藏数据
      this.handleGetAccountFavorite();
    },
    // 获取自选用户收藏的交易对
    handleGetAccountFavorite() {
      const identity = this.$store.state.app.scatter.identity;
      if (identity && identity.accounts[0].name) {
        const params = {
          account: identity.accounts[0].name
        };
        this.$http.post('/account/getFavoriteSymbolList', params).then((res) => {
          if (res.code !== 0) {
            // this.$message.error(res.msg);
            this.handleFavoriteFormat([], false);
            return;
          }
          // 如果用户有自选数据
          const items = res.symbolList;
          let list = [];
          if (items.length) {
            list = items.map(v => v.symbolId);
          }
          this.handleFavoriteFormat(list, true);
        }).catch(() => {
          this.handleFavoriteFormat([], false);
        })
        return;
      }
      this.handleFavoriteFormat([], false);
    },

    // 匹配被收藏的交易对时，即更新isFavorite
    handleFavoriteFormat(list, islogin) {
      let favoriteUser = list;
      const favoriteVuex = this.$store.state.app.favoriteData;
      // 取缓存和用户数据 获取并集
      favoriteUser = Array.from(new Set([...favoriteUser, ...favoriteVuex]));
      // this.$store.dispatch('setFavoriteData', favoriteUser);

      if (favoriteUser && favoriteUser.length) {
        this.tableDataAll.forEach((v) => {
          const vv = v;
          vv.isFavorite = false;
          const obj = favoriteUser.find(t => t === vv.id);
          if (obj) {
            vv.isFavorite = true;
          }
        });
      }
      if (islogin && favoriteVuex.length) {
        // 登录后上传本地收藏交易对数据
        this.handleFavoriteSetting(favoriteUser.toString(), 1);
      }
      // 如果在自选区
      const aindex = localStorage.getItem('menu-activeIndex');
      if (aindex === '-1,-1') {
        this.selfSelection = true;
      }
      if (this.subCoinPair === 'crossLink' || this.selfSelection) {
        this.eltableHeight = 428;
        this.eltableHeight = 428;
      }
      if (this.selfSelection) {
        this.loading = true;
        const tableData = this.tableDataAll.filter(v => v.isFavorite === true);
        setTimeout(() => {
          this.tableData = tableData;
          this.loading = false;
          this.handleSearchData();
          this.isFirstLoad = false;
        }, 200)
        return;
      }
      // 读取用户交易区
      if (this.$appName === 'tronNewdex') {
        this.eltableHeight = 428;
      }
      this.isFirstLoad = false;
      // 格式化各个交易区数据
      setTimeout(() => {
        if (this.subCoinPair === 'resource') return;
        this.handleCheckCodeByArea();
        this.loading = false;
        this.handleSearchData();
      }, 200)
    },

    // 检索出各个交易区
    handleCheckCodeByArea() {
      this.tableData = this.tableDataAll.filter(v => v.chainSerach.toUpperCase() === this.subCoinPair.toUpperCase());
      // cusd & eusd 合集
      if (this.subCoinPair === 'usds') {
        this.tableData = this.tableDataAll.filter(v => this.$store.state.app.stableCode.find(f => f === v.chainSerach.toUpperCase()));
      }
      // 如果是在EOS交易区，过滤跨链币种
      if (this.subCoinPair === 'eos') {
        this.tableData = this.tableData.filter(v => v.baseChain === v.valuationChain && v.symbolArea === this.subCoinPair.toUpperCase());
      }
      // 手动排序 bos/eos 排到第一位
      if (this.subCoinPair !== 'eos' && this.subCoinPair !== 'usds' && this.subCoinPair !== 'trx') {
        let cIndex = -1;
        if (this.$appName === 'eosNewdex') {
          cIndex = this.tableData.findIndex(v => v.symbolArea === 'EOS');
        }
        if (this.$appName === 'tronNewdex') {
          cIndex = this.tableData.findIndex(v => v.symbolTrad === 'TRX');
        }
        if (cIndex !== -1 && this.tableData.length >= 2) {
          const getItem = JSON.stringify(this.tableData[cIndex]);
          this.tableData.splice(cIndex, 1);
          this.tableData.unshift(JSON.parse(getItem));
        }
      }
      this.tableData.sort((a, b) => b.top_flag - a.top_flag);
      if (this.$refs.vueTable) {
        this.$refs.vueTable.clearSort();
      }
    },

    // 筛选条件 排序
    handleSortChange(val) {
      if (val.order === 'descending') { // 降序
        this.tableData.sort((a, b) => Number(b[val.prop]) - Number(a[val.prop]));
      }
      if (val.order === 'ascending') { // 升序
        this.tableData.sort((a, b) => Number(a[val.prop]) - Number(b[val.prop]));
      }
      if (!val.order) { // 默认
        this.tableData.sort((a, b) => Number(b.volume) - Number(a.volume));
        if (this.subCoinPair !== 'resource' && !this.selfSelection) {
          this.handleCheckCodeByArea();
        }
        if (this.subCoinPair === 'resource') {
          this.tableData.sort((a, b) => Number(b.index) - Number(a.index));
        }
      }
      if (!this.selfSelection) {
        this.tableData = this.tableData.sort((a, b) => b.top_flag - a.top_flag);
      }
    },

    /* 点击收藏/取消收藏交易对 */
    handleRegFavorite(item) {
      const identity = this.$store.state.app.scatter.identity;
      if (identity && identity.accounts[0].name) {
        // 判断当前项是否是收藏状态
        if (!item.isFavorite) {
          this.handleFavoriteSetting(item.id, 1);
          return;
        }
        this.handleFavoriteSetting(item.id, 0);
        return;
      }
      // 非登录用户本地保存
      this.handleRegFavoriteAction(item.id, !item.isFavorite);
    },

    // 收藏/取消收藏交易对 效果操作(静态操作)
    handleRegFavoriteAction(symbols, isFavorite) {
      const identity = this.$store.state.app.scatter.identity;
      const favoriteData = this.$store.state.app.favoriteData;
      // 收藏交易对
      if (isFavorite) {
        symbols.toString().split(',').forEach((item) => {
          const obj = this.tableDataAll.find(v => v.id === Number(item));
          const obj2 = this.tableData.find(v => v.id === Number(item));
          if (obj2) {
            obj2.isFavorite = true;
          }
          if (obj) {
            obj.isFavorite = true;
            if (!favoriteData.find(v => v === Number(item))) {
              favoriteData.push(Number(item));
            }
          }
        });
        this.$store.dispatch('setFavoriteData', favoriteData);
        if (identity && identity.accounts[0].name) {
          this.$store.dispatch('setFavoriteData', []);
        }
        return;
      }
      // 取消收藏
      symbols.toString().split(',').forEach((item) => {
        const obj = this.tableDataAll.find(v => v.id === Number(item));
        const obj2 = this.tableData.find(v => v.id === Number(item));
        if (obj2) {
          obj2.isFavorite = false;
        }
        if (obj) {
          obj.isFavorite = false;
          const findex = favoriteData.findIndex(v => v === Number(item));
          if (findex !== -1) {
            favoriteData.splice(findex, 1);
          }
        }
      });
      this.$store.dispatch('setFavoriteData', favoriteData);
      if (identity && identity.accounts[0].name) {
        this.$store.dispatch('setFavoriteData', []);
      }

      // 如果在自选区，就移除改交易对
      if (this.selfSelection) {
        this.loading = true;
        const tableData = this.tableDataAll.filter(v => v.isFavorite === true);
        setTimeout(() => {
          this.tableData = tableData;
          this.loading = false;
        }, 200)
      }
    },

    /*
    * 自选收藏设置
    * symbols 交易对字符串，多个交易对用逗号分割
    * enable 0-取消收藏，1-收藏
    * delAll 是否删除所有：0-不删除，1-删除
    */
    handleFavoriteSetting(symbols, enable) {
      // 授权判断
      const token = localStorage.getItem('Frontend-Token');
      const params = {
        symbolIds: symbols,
        type: enable,
      };
      if (token) {
        this.$http.post('/account/favoriteSymbol', params).then((res) => {
          if (res.code === 401 || res.code === 500 || res.code === 1000 || res.code === 1001 || res.code === 1002 || res.code === 1003) {
            localStorage.setItem('Frontend-Token', '');
            this.handleAuthorized(() => {
              this.handleFavoriteSetting(symbols, enable);
            });
            return;
          }
          if (res.code !== 0) {
            this.$message.error(res.msg);
            return;
          }
          this.handleRegFavoriteAction(symbols, enable);
        })
        return;
      }
      // 去授权
      this.handleAuthorized(() => {
        this.handleFavoriteSetting(symbols, enable);
      });
    },

    // 授权操作(收藏/取消交易对 用到)
    handleAuthorized(callback) {
      authorized(this, (code, result) => {
        if (code === 'error') { // 授权错误
          console.log(result); // eslint-disable-line
          return;
        }
        callback();
      });
    },

    // 搜索该交易区中的数据 -- 搜索功能
    handleSearchData() {
      if (this.searchKey !== '') {
        const datas = this.tableData;
        const serchBack = datas.filter((v) => {
          const idxof = v.symbolTrad.toLowerCase().indexOf(this.searchKey.toLowerCase());
          if (idxof === -1) {
            this.searchData = [];
          }
          return idxof !== -1
        });
        serchBack.sort((a, b) => {
          const sortRight = b.symbolTrad < a.symbolTrad ? 1 : -1;
          return sortRight;
        })
        this.searchData = serchBack;
        return
      }
      this.searchData = [];
    },

    // 列表数据返回
    handleTableData() {
      const rname = this.$route.name;
      if (rname === 'index') {
        const indexData = []
        this.tableData.forEach((v, i) => {
          if (i < 20) {
            indexData.push(v);
          }
        });
        return this.searchKey ? this.searchData : indexData
      }
      return this.searchKey ? this.searchData : this.tableData
    },

    // 监听每行点击事件 -- 跳转到交易中心
    handleRowClick(row) {
      // const appTrad = this.$store.state.app.trade;
      if (this.tradeMenu && row.symbol === this.currentRow.symbol && this.currentRow.checked) return;
      this.storeSymbol = row.symbol;
      this.tradRouterParams = parseCase(row.symbol);
      if (row.cross) { // issue.newdex 跨链币
        this.tradRouterParams = row.cross;
      }
      if (row.isRresource) {
        this.storeSymbol = row.name;
      }
      this.handleToTransaction(row);
    },
    // 跳转
    handleToTransaction(row) {
      if (this.searchKey !== '') {
        this.historyList.unshift(row.symbolTrad);
        this.historyList = Array.from(new Set(this.historyList));
        if (this.historyList.length > 6) {
          this.historyList.pop();
        }
        localStorage.setItem('historyData', JSON.stringify(this.historyList));
      }
      if (row.isRresource) {
        this.$router.push({
          name: `${row.name}Exchange`
        });
        return;
      }
      const query = this.$route.params;
      if ((this.$route.name === 'trade' || this.$route.name === 'embedTrade')
      && query && query.trade === this.tradRouterParams) return;
      if (this.$route.name === 'embedTrade') {
        this.$router.push({
          path: `/embed-trade/${this.tradRouterParams}`
        });
      } else {
        this.$router.push({
          path: `/trade/${this.tradRouterParams}`
        });
      }
      const tradAppDefault = {
        id: row.id,
        symbol: row.symbol,
      }
      this.$store.dispatch('setTrade', tradAppDefault);
    },

    // 当前选中交易对的行信息
    handleCurrentChange(val) {
      if (this.$route.name === 'trade' || this.$route.name === 'embedTrade') {
        const appTrad = this.$store.state.app.trade;
        const cr = this.tableData.find(item => item.symbol === appTrad.symbol);
        if (cr) {
          this.currentRow = cr;
        }
      } else {
        this.currentRow = val;
      }
    },

    // 交易对选中
    handleCheckedSymbol() {
      if (this.$route.name === 'trade' || this.$route.name === 'embedTrade') {
        const checkObj = this.tableData.find(item => item.checked === true);
        if (checkObj) {
          checkObj.checked = false;
        }
        this.storeSymbol = (this.trad.symbol).toLowerCase();
        const cr = this.tableData.find(item => item.symbol === this.storeSymbol);
        if (cr) {
          this.currentRow = cr;
          this.currentRow.checked = true;
          this.$refs.vueTable.setCurrentRow(this.currentRow);
        }
      } else {
        const item = this.tableData.find(v => v.checked);
        if (item) {
          item.checked = false;
        }
      }
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    toNonExponential(num) {
      return toNonExponential(num);
    },
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    handlePriceNumber(symbolArea, price, precision) {
      try {
        const a = this.$store.state.app.pricesCurrentcy[symbolArea];
        const b = toNonExponential(a * price);
        if (this.$store.state.app.language === 'zh-CN') {
          const p = precision >= 4 ? precision - 2 : precision;
          const c = Number(toFixed(b, p)).toFixed(p);
          const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
          // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
          return d;
        }
        const p = precision >= 4 ? precision - 1 : precision;
        const c = Number(toFixed(b, p)).toFixed(p);
        const d = Number(c) ? Number(b).toFixed(p) : toNonExponential(Number(Number(b).toFixed(precision)))
        return d;
        // return Number(b.toFixed(p)) ? b.toFixed(p) : b.toFixed(precision)
      } catch (error) {
        console.log(error); // eslint-disable-line
        return '0.00';
      }
    },

    // 资源 ws
    handleWsResource() {
      if (this.$route.name === 'embedTrade') return;
      this.tableData = [];
      this.loading = true;
      this.hasDataForTable = true;
      // rex ram ws 初始数据
      Io.cfwsRresourceHeard((datas) => {
        if (datas.length > 1) { // 首次获取
          datas.forEach((e) => {
            const item = {
              name: e.name,
              contract: e.name,
              chain: `${e.name}-${e.name}`,
              symbol: e.name === 'cpu' ? 'cpu&net-cpu & net-eos' : `${e.name}-${e.name}-eos`,
              id: -1,
              precision: {
                coin: e.precision.coin,
                price: this.tradeMenu && e.name === 'rex' ? 8 : e.precision.price
              },
              status: 0,
              tag: 0,
              price: Number(e.price), // 24H 最新价
              change: Number(e.change), // 24 涨幅
              high: Number(e.high), // 24H 最高价
              low: Number(e.low), // 24H 最低价
              amount: Number(e.volume), // 24H 成交额
              volume: Number(e.amount), // 24H 成交量
              isRresource: 1,
            };
            const hasItem = this.tableData.findIndex(v => v.contract === e.name);
            if (hasItem >= 0) {
              this.tableData[hasItem] = item;
            } else {
              this.tableData.push(this.handleSymbolNewFormat(item));
            }
          })
          this.loading = false;
          this.handleSearchData();
        }
        if (datas.length === 1) {
          const update = this.tableData.find(v => v.name === datas[0].name);
          if (update) {
            update.price = Number(datas[0].price); // 24H 最新价
            update.change = Number(datas[0].change); // 24 涨幅
            update.high = Number(datas[0].high); // 24H 最高价
            update.low = Number(datas[0].low); // 24H 最低价
            update.amount = Number(datas[0].volume); // 24H 成交额
            update.volume = Number(datas[0].amount); // 24H 成交量
          } else {
            this.tableData.push(this.handleSymbolNewFormat(datas[0]));
          }
        }
        const rname = this.$route.name;
        let fitem = null;
        if (rname === 'cpuExchange') {
          fitem = 'cpu';
        }
        if (rname === 'rexExchange') {
          fitem = 'rex';
        }
        if (rname === 'ramExchange') {
          fitem = 'ram';
        }
        const bitem = this.tableData.find(cv => cv.name === fitem);
        if (bitem) {
          bitem.checked = true;
          this.handleCurrentChange(bitem)
        }
        this.loading = false;
      })
    },

    // ws 取消资源订阅
    handleResourceWsClose() {
      Io.cfwsUnsubscribe('resource.*');
    },
    parseSymbol(a, b) {
      return parseSymbol(a, b)
    }
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/css/variables.scss";
.tableSetHei{
  /deep/ .el-table,
  /deep/ .el-table__body-wrapper {
    height: auto!important;
  }
}
/deep/ .el-table__body {
  td:first-child {
    .cell {
      overflow: visible !important;
    }
  }
}
.symbolCoinCode {
  position: relative;

  span {
    display: inline-block;
    position: relative;
    z-index: 1000 !important;
    .ndxTip {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      font-size: 19px;
      color: #EE1443;
      width: 46px;
      height: 22px;
      right: -45px;
      top: -16px;
      z-index: 1000 !important;
    }
    .newCoinIcon {
      position: absolute;
      display: inline-block;
      vertical-align: middle;
      font-size: 19px;
      color: #4A90E2;
      right: -33px;
      top: -16px;
      z-index: 1000 !important;

      &.icon-jijiangkaifang {
        right: -47px;
        color: rgb(236, 163, 47);
      }
    }
  }
  .celianImg {
    display: inline-block;
    width: 18px;
    margin-left: 3px;
    vertical-align: middle;
  }
}
.newCoin {
  position: relative;
  padding-left: 1px;
  .newCoinImg {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 25px;
    height: 25px;
    margin-top: -14px;
    background-color: #fff;
    background-image: url('/static/img/eos1.png');
    background-size: cover;
    border-radius: 50%;
  }
  .newCoinImgForTron {
    background-color: #fff;
    background-image: url('../assets/img/tron-default.png');
    background-size: cover;
  }
  .tradeImg {
    right: 1px;
    width: 17px;
    height: 17px;
    margin-top: -9px;
  }

  .newCoinImg,
  .newCoinImgForTron,
  .tradeImg {
    img {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 50%;

      &::after {
        content: '';
        background-image: url('/static/img/eos1.png');
        background-size: cover;
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
      }
    }
  }
  .newCoinImgForTron {
    img {
      &::after {
        content: '';
        background-image: url('../assets/img/tron-default.png?v=1.0.0');
        background-size: cover;
      }
    }
  }
}
// .newCoinIcon {
//   padding: 1px 2px;
//   line-height: 16px;
//   border-radius: 2px;
//   font-style: normal;
//   text-align: center;
//   background: #0469FF;
//   color: #fff;
//   font-size: 12px;
//   margin-left: 2px;
// }
.icon-jiaoyizanting, .icon-jiaoyitingzhi {
  margin-left: 4px;
  color: #FF9800;
}
.icon-color {
  color: #FF1739;
}
.theme-278EDA {
  .color-333 {
    color: #333;
  }
  .cell span{
    color: #333;
  }
}
.cell span {
  // display: inline-block;
  // vertical-align: middle;
}
.theme-1B1D27 {
  .zxq {
    .icon-zixuan {
      color: #7b8db9 !important;
    }
    /deep/ .el-table--scrollable-y {
      ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 15px;
      }
      /*定义滚动条的轨道，内阴影及圆角*/
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
        border-radius: 0;
        background-color: rgba(0, 0, 0, 0);
        border-radius: 15px;
      }
      /*定义滑块，内阴影及圆角*/
      ::-webkit-scrollbar-thumb {
        /*width: 10px;*/
        /*height: 25px;*/
        -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5);
        background-color: rgba(0, 0, 0, .5);
        border-radius: 15px;
      }
    }
  }
}
.zxq{
  /deep/ .el-table--scrollable-y {
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #f1f1f1;
    }
    /*定义滚动条的轨道，内阴影及圆角*/
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 0 #f1f1f1;
      border-radius: 0;
      background-color: #f1f1f1;
    }
    /*定义滑块，内阴影及圆角*/
    ::-webkit-scrollbar-thumb {
      /*width: 10px;*/
      /*height: 25px;*/
      border-radius: 1px;
      -webkit-box-shadow: inset 0 0 0 #c1c1c1;
      background-color: rgba(193, 193, 193, 0.7);
    }
    /deep/ .el-table__body-wrapper {
      overflow-y: auto!important;
    }
  }
  /deep/ .el-table__body .cell,
  /deep/ .el-table__header .cell{
    font-weight: normal;
    cursor: pointer;
  }

  /deep/ .el-table__header .cell{
    height: 32px;
    line-height: 32px;
  }

  /deep/ .el-table__body tbody tr td:first-child .cell,
  /deep/ .el-table__header thead th:first-child .cell{
    text-align: center;
  }
  /deep/ .el-table__body tbody tr td:nth-child(2) .cell {
    padding: 7px 0 7px;
    overflow: initial;
  }
  /deep/ .el-table__header thead th:nth-child(2) .cell{
    padding-left: 0;
  }
  /deep/ .el-table__body tbody tr td:nth-child(2) .cell,
  /deep/ .el-table__header thead th:nth-child(2) .cell{
    text-align: left;
  }
  /deep/ .el-table__header thead th:nth-child(4) .cell {
    text-align: right!important;
    .caret-wrapper {
      margin-left: -4px;
      margin-right: -4px;
    }
  }
  /deep/ .el-table__body tbody tr td:nth-child(3) .cell,
  /deep/ .el-table__header thead th:nth-child(3) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(5) .cell,
  /deep/ .el-table__header thead th:nth-child(5) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(6) .cell,
  /deep/ .el-table__header thead th:nth-child(6) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(7) .cell,
  /deep/ .el-table__header thead th:nth-child(7) .cell{
    text-align: right;
  }
  /deep/ .el-table__body tbody tr td:nth-child(2) {
  }
  /deep/ .el-table__body tbody tr td:nth-child(5) .cell,
  /deep/ .el-table__header thead th:nth-child(5) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(6) .cell,
  /deep/ .el-table__header thead th:nth-child(6) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(7) .cell,
  /deep/ .el-table__header thead th:nth-child(7) .cell{
    padding-right: 5px;
  }

  /deep/ .el-table__body tbody tr td:nth-child(7) .cell,
  /deep/ .el-table__header thead th:nth-child(7) .cell{
    padding-right: 0px;
  }
  /deep/ .el-table__body tbody tr td:nth-child(7) .cell {
    padding-right: 5px;
  }

  /deep/ .el-table__body tbody tr td:nth-child(4) .cell,
  /deep/ .el-table__header thead th:nth-child(4) .cell{
    text-align: right;
  }
  /deep/ .el-table__body tbody tr td:nth-child(4) .cell {
    padding-right: 5px;
  }

  /deep/ .el-table__body tbody tr td:nth-child(8) .cell,
  /deep/ .el-table__header thead th:nth-child(8) .cell{
    text-align: right;
    // padding-right: 30px;
  }
  /deep/ .el-table__body tbody tr td:nth-child(8) .cell {
    padding-right: 6px;
  }
  /deep/ .el-table__body tbody tr td:nth-child(9) .cell,
  /deep/ .el-table__header thead th:nth-child(9) .cell{
    text-align: center;
  }
  .noCellPadding{
    /deep/ .el-table__body .cell,
    /deep/ .el-table__header .cell{
      padding-left: 1px;
      padding-right: 3px;
    }

    .fontTrans{
      font-size: 15px !important;
      vertical-align: middle;
      display: inline-block;
      margin-top: -2px;
    }
  }

  .mh200{
    min-height: 200px;
  }

  .colorThis {
    font-weight: bold;
  }

  .icon-zixuan1{
    color: #278EDA;
  }

  .center{
    /deep/ .el-table__header thead th{
      // background: $-topcolorf7;
    }

    /deep/ th.is-leaf, td,
    /deep/ .el-table__body td{
      padding: 2px 0;
    }

    /deep/ .el-table__body .cell,
    /deep/ .el-table__header .cell{
      font-size: 12px;
    }
  }

  .trActive > td {
    background-color: #f5f7fa;
  }

  .jyd-right{
    color: #999 !important;

    span {
      color: #999 !important;
    }
  }

  .red{
    color: #FF1739 !important;
  }

  .green{
    color: #01AA21 !important;
  }

  .tools{
    color: #278EDA;
  }

  .tableFooter{
    padding: 30px;
    text-align: center;
    background: #fff;
  }
}

/deep/ .el-table thead {
  color: #999;
}
.theme-1B1D27{
  .zxq{
    .tableFooter{
      background: $-black1;
    }

    .center{
      /deep/ .el-table__header thead th{
        background: $-black1 !important;
      }
    }

    .jyd-left{
      color: rgba(255, 255, 255, .8);
    }
    .cell span{
      color: rgba(255, 255, 255, .6);

      &.red {
        color: #FF1739 !important;
      }

      &.green {
        color: #01AA21 !important;
      }
    }
    .cell span.colorThis{
      color:RGBA(0, 148, 213, 1) !important;
    }
    .el-table__body tr.current-row td {
      background-color: #e9f4fb !important;
    }
  }
}

.tableSetHei.zxq {
  .el-table .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
  /deep/ .el-table__header thead th:nth-child(4) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(4) .cell {
    text-align: left!important;
    // padding-right: 10px;
  }
  /deep/ .el-table__header thead th:nth-child(3) .cell,
  /deep/ .el-table__body tbody tr td:nth-child(3) .cell {
    text-align: left!important;
  }
  /deep/ .el-table__body tbody tr td:nth-child(8) .cell {
    padding-right: 15px;
  }
  /deep/ .el-table__header thead th:nth-child(8) .cell {
    padding-right: 8px;
  }
}
// .tableIndex {
//   /deep/ .el-table__body tbody tr td:nth-child(8) .cell, {
//     padding-right: 30px;
//   }
//   /deep/ .el-table__header thead th:nth-child(8) .cell {
//     padding-right: 22px;
//   }
// }

</style>
